<div class="in">
    <div class="in-t">
        <ul class="in-ul">
            <li class="in-li1"><a>
                <img src="https://www.dior.cn//beauty/version-5.1610097138806/resize-image/ep/870/580/90/0/%252FY0996116%252FV002%252FY0996116_C099600555_E01_ZHC.jpg?imwidth=870" alt="">
                    </a>
                    <div class="focus"></div>
                    <div class="mo"></div>
                </li>
                <div class="big"><img src="https://www.dior.cn//beauty/version-5.1610097138806/resize-image/ep/870/580/90/0/%252FY0996116%252FV002%252FY0996116_C099600555_E01_ZHC.jpg?imwidth=870" alt=""></div>
            <li class="in-li2"><a>
                <img src="https://www.dior.cn/beauty/version-5.1610097138806/resize-image/ep/460/498/90/0/%252FY0996116%252FV001%252FY0996116_C099600555_E02_GHC.jpg?imwidth=430" alt="">
                    </a></li>
            <li class="in-li2"><a>
                <img src="https://www.dior.cn/beauty/version-5.1610097138806/resize-image/ep/460/498/90/0/%252FY0996116%252FV003%252FY0996116_E03_GHC.jpg?imwidth=430" alt="">
                    </a></li>
        </ul>
    </div>
</div>

<script>
 function Magnifier(){
                  // small 部分元素; 
                  this.samll_wrapper_ele = document.querySelector(".in-li1");
                  this.focus_ele = document.querySelector(".focus");
                  
                  this.big_wrapper_ele = document.querySelector(".big");
                  // big 部分元素; 
                  this.big_img_ele = this.big_wrapper_ele.querySelector(".big img");
            }
            Magnifier.prototype.bindEvent = function(){
                  // 存实例对象 : 
                  var magnifier_instance = this;

                  this.samll_wrapper_ele.onmouseover = function(){
                        magnifier_instance.toggle("show");
                  }
                  this.samll_wrapper_ele.onmouseout = function(){
                        magnifier_instance.toggle("hide");
                  }

                  this.samll_wrapper_ele.onmousemove = function( evt ){
                        var e = evt || event;
                        magnifier_instance.move( e.offsetX , e.offsetY );
                  }
            }
            Magnifier.prototype.toggle = function( type ){
                  switch( type ){
                        case "show" : 
                              this.focus_ele.style.display = "block";
                              this.big_wrapper_ele.style.display = "block";
                              break;
                        case "hide" :
                              this.focus_ele.style.display = "none";
                              this.big_wrapper_ele.style.display = "none";
                              break;
                  }
            }
            // 移动涉及的功能很复杂 : 
            // - 边界检测 :
            //   - 如果left值小于了最小值就让left值为最小值;  0 
            //   - 如果left值大于了最大值就让left值为最大值;  
            
            // - 鼠标获取位坐标的参照物和元素获取坐标的参照物是否相同; 
            // - 给samll部分贴个膜, 让鼠标获取位置位置的参照物和 focus 一致：
            Magnifier.prototype.move = function( x , y ){
                  var _left = x - 400;
                  var _top  = y - 140;

                  // 边界检测 : 判定数据的极值 ; 
                  
                  _left = _left < 0 ? 0 : _left;
                  _top  = _top  < 0 ? 0 : _top;
                  // 计算focus的最大移动距离 ; 
                  // small的宽度-focus的宽度; 
                  // 150 ; 

                  _left = _left > 440 ? 440 : _left;
                  _top  = _top > 290 ? 290 : _top;


                  // 给focus定位 : 
                  this.focus_ele.style.left = _left + "px";
                  this.focus_ele.style.top  =  _top + "px";


                  // 大图运动 : 
                  // - 先计算小图left值和top的运动比例; 
                  // left/运动的最大值; 

                  var _left_prop = _left / 100;
                  var _top_prop = _top / 290;

                  // 根据比例让大图运动; 


                  this.big_img_ele.style.left =  -100* _left_prop + "px";
                  this.big_img_ele.style.top  = - 250 * _top_prop  + "px";
            }

            new Magnifier().bindEvent();

</script>